<script setup>
import HomeGrid from '@/components/HomeGrid.vue';
import HomeProduct from '@/components/HomeProduct.vue';
import HomeSwiper from '@/components/HomeSwiper.vue';
import HomeNew from '@/components/HomeNew.vue';
import HomeTop from '@/components/HomeTop.vue';
import { showToast } from 'vant';
import { ref } from 'vue';

// 搜索关键词
const search = ref('');

// 优化搜索方法
const onSearch = function () {
  if (!search.value.trim()) {
    showToast('请输入搜索关键词');
    return;
  }
  // TODO: 实现搜索逻辑
}

const onCancel = function () {
  search.value = '';
  showToast('已取消搜索');
}

</script>

<template>
  <div class="home-container">
    <van-search
      v-model="search"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @cancel="onCancel"
      shape="round"
      background="#f7f8fa"
    />
    
    <div class="content-wrapper">
      <HomeSwiper />
      <HomeGrid />
      <HomeProduct />
      <HomeNew />
      <HomeTop />
    </div>

    <VanToast />
  </div>
</template>

<style lang="scss" scoped>
.home-container {
  min-height: 100vh;
  background-color: #f7f8fa;
}

.content-wrapper {
  padding: 0 12px;
}
</style>